<template>
  <div class="wrap">
    <div class="choise">
      <el-date-picker
        v-model="month"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :picker-options="pickerOptions"
        @change="changeMonth"
        format="yyyy年MM月"
        value-format="yyyy年MM月"
        :clearable="false"
      ></el-date-picker>
      <el-select
        class="type-option"
        @change="optionChange"
        v-model="selectedType"
        placeholder="请选择"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select class="org-option" @change="optionChange" v-model="selectedOrg" placeholder="请选择">
        <el-option
          v-for="item in orgOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div id="chart4"></div>
  </div>
</template>
<script>
import { DatePicker, Select, Option } from "element-ui";
import echarts from "echarts";
import { getAllFirstLoanOrgList, getChart4Data } from "@/api/first-loan.js";
export default {
  name: "chart4",
  components: {
    [DatePicker.name]: DatePicker,
    [Option.name]: Option,
    [Select.name]: Select
  },
  props: {
    actived: Boolean,
    chartName: String
  },
  data() {
    return {
      month: "",
      typeOptions: [
        {
          value: 0,
          label: "户数"
        },
        {
          value: 1,
          label: "贷款余额"
        }
      ],
      selectedType: 0,
      orgOptions: [],
      selectedOrg: null,
      chartInstance: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            }
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  watch: {
    actived() {
      if (!this.actived) {
        return;
      }
      this.refreshChart();
    }
  },
  methods: {
    refreshChart() {
      if (this.orgOptions.length == 0) {
        setTimeout(this.refreshChart, 1000);
        return;
      }
      getChart4Data({
        startMonth: this.month[0],
        endMonth: this.month[1],
        type: this.selectedType,
        orgId: this.selectedOrg
      })
        .then(res => {
          this.chartInstance = echarts.init(document.getElementById("chart4"));
          this.chartInstance.resize();
          this.drawChart(res);
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    drawChart(data) {
      let legend = [];
      let category = [];
      let datas = [];
      data.forEach(item => {
        legend.push(item.month);
        datas.push(item.value);
      });
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b}<br/>{c}"
        },
        legend: {
          data: legend
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: legend
          }
        ],
        yAxis: [
          {
            type: "value",
            minInterval: null
          }
        ],
        series: [
          {
            data: datas,
            type: "bar"
          }
        ]
      };
      if (this.selectedType === 0) {
        option.tooltip.formatter = "{b}<br/>{c}户";
        option.yAxis[0].minInterval = 1;
      } else {
        option.tooltip.formatter = "{b}<br/>{c}元";
      }
      this.chartInstance.setOption(option);
    },
    changeMonth() {
      this.refreshChart();
    },
    optionChange() {
      this.refreshChart();
    }
  },
  mounted() {
    getAllFirstLoanOrgList()
      .then(res => {
        res.forEach(item => {
          this.orgOptions.push({
            label: item.orgName,
            value: item.orgId
          });
          if (res.length != 0) {
            this.selectedOrg = res[0].orgId;
          }
        });
      })
      .catch(errMsg => this.$alert(errMsg.msg));
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .choise {
    .type-option {
      margin-left: 5px;
      margin-right: 5px;
    }
  }

  #chart4 {
    height: 400px;
    background-color: #eee;
    margin-top: 15px;
  }
}
</style>